
<template>
  <v-container>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="7" lg="6">
        <v-form v-model="valid" class="mt-12">
          <v-text-field
            v-model="orgnization"
            :rules="orgnizationRules"
            label="预约组织"
            prepend-icon="mdi-account-group"
            required
          ></v-text-field>
          <v-textarea
            class="mt-4"
            rows="1"
            v-model="content"
            :rules="contentRules"
            auto-grow
            label="拍摄内容"
            prepend-icon="mdi-camera"
            required
          ></v-textarea>
          <v-text-field
            class="mt-4"
            v-model="count"
            :rules="countRules"
            label="所需人数"
            prepend-icon="mdi-human-male-male"
            required
          ></v-text-field>
          <v-menu
            v-model="menu"
            :close-on-content-click="false"
            :nudge-right="40"
            transition="scale-transition"
            offset-y
            min-width="290px"
          >
            <template v-slot:activator="{ on }">
              <v-text-field
                class="mt-4"
                v-model="date"
                label="拍摄日期"
                prepend-icon="mdi-calendar-check"
                readonly
                v-on="on"
              ></v-text-field>
            </template>
            <v-date-picker v-model="date" @input="menu = false">
            </v-date-picker>
          </v-menu>
          <v-menu
            ref="menu2"
            v-model="menu2"
            :close-on-content-click="false"
            :nudge-right="40"
            :return-value.sync="time"
            transition="scale-transition"
            offset-y
            max-width="290px"
            min-width="290px"
          >
            <template v-slot:activator="{ on }">
              <v-text-field
                class="mt-4"
                v-model="time"
                label="拍摄时间"
                readonly
                prepend-icon="mdi-alarm"
                v-on="on"
              ></v-text-field>
            </template>
            <v-time-picker
              v-if="menu2"
              color="secondary"
              v-model="time"
              format="24hr"
              full-width
            >
              <v-spacer></v-spacer>
              <v-btn text color="primary" @click="menu2 = false">取消</v-btn>
              <v-btn text color="primary" @click="$refs.menu2.save(time)">确定</v-btn>
            </v-time-picker>
          </v-menu>
          <v-text-field
            class="mt-4"
            v-model="username"
            :rules="usernameRules"
            label="联系人"
            prepend-icon="mdi-account"
            required
          ></v-text-field>
          <v-text-field
            class="mt-4"
            v-model="phone"
            :rules="phoneRules"
            label="联系方式"
            prepend-icon="mdi-phone"
            required
          ></v-text-field>
          <v-text-field
            class="mt-4"
            v-model="mail"
            :rules="mailRules"
            label="收片邮箱(非必填)"
            prepend-icon="mdi-email"
          ></v-text-field>
          <v-textarea
            class="mt-4"
            rows="1"
            auto-grow
            v-model="remark"
            label="备注(填写拍摄注意事项等信息(非必填))"
            prepend-icon="mdi-pencil"
          ></v-textarea>
          <v-file-input v-model="file" @change="upload" label="附件(小于10M(非必填))"></v-file-input>
          <div class="text-center">
            <v-btn
              class="ma-2"
              :disabled="!valid"
              color="primary"
              @click="submit()"
              :dark="valid"
            >提交</v-btn>
          </div>
        </v-form>
      </v-col>
    </v-row>
    <v-dialog v-model="dialog.show" max-width="350">
      <v-card>
        <v-card-title class="headline">焦点摄影工作室</v-card-title>
        <v-card-text>{{ dialog.message }}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            text
            @click="dialog.show = false; if (dialog.action.reset) { $refs.form.reset(); dialog.action.reset = false; } processing = false;"
            dark
          >好</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="dialog2.show" hide-overlay width="270">
      <v-card dark>
        <v-card-text>
          <div class="text-center">
            <div class="title">附件上传中</div>
            <br />
            <v-progress-circular
              :rotate="-90"
              :size="100"
              :width="15"
              :value="progress"
              color="primary"
            >{{ progress }}</v-progress-circular>
          </div>
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-container>
</template>
<script>
import Captcha from "easy-tencent-captcha";
const captcha = new Captcha({
  appId: "2074849171"
});
export default {
  name: "reservation",
  data: () => ({
    progress: 0,
    ticket: "",
    randstr: "",
    valid: false,
    dialog: { show: false, message: "", action: { reset: false } },
    dialog2: { show: false },
    content: "",
    contentRules: [v => !!v || "请填写拍摄内容！"],
    orgnization: "",
    orgnizationRules: [
      v => !!v || "请填写预约组织名称！",
      v => (v && v.length <= 40) || "组织名称需要少于40字符！"
    ],
    username: "",
    usernameRules: [
      v => !!v || "请填写联系人姓名！",
      v => (v && v.length <= 30) || "联系人姓名需要少于30字符！"
    ],
    phone: "",
    phoneRules: [
      v => !!v || "请填写你的电话号码，以确保工作人员可以联系到你。",
      v =>
        (v && v.length == 11) ||
        "请正确填写你的电话号码，以确保工作人员可以联系到你。"
    ],
    count: 1,
    countRules: [
      v => !!v || "请填写所需人数！",
      v => /(^[1-9]\d*$)/.test(v) || "请填写正整数！"
    ],
    mail: "",
    mailRules: [
      v =>
        /(^$)|^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(
          v
        ) || "请填写正确的邮箱地址！"
    ],
    remark: "",
    file: [],
    date: "",
    time: "",
    menu: false,
    menu2: false,
    fileName: null
  }),
  methods: {
    upload: function() {
      var that = this;
      if (this.file != null && this.file.size > 0) {
        let formData = new FormData();
        formData.append("file", this.file);
        this.dialog2.show = true;
        this.axios({
          method: "post",
          url: "http://www.hdufocus.cn:8081/file",
          headers: {},
          data: formData,
          onUploadProgress: function(progressEvent) {
            if (progressEvent.lengthComputable) {
              let num = Math.round(
                (progressEvent.loaded / progressEvent.total) * 100
              );
              that.progress = num;
            }
          }
        })
          .catch(function() {
            that.dialog.message = "上传失败！";
            that.dialog2.show = false;
            that.dialog.show = true;
            that.progress = 0;
            that.file = null;
          })
          .then(function(response) {
            const status = response.status;
            if (status === 200) {
              that.fileName = response.data.data;
              that.dialog.message = "上传成功！";
              that.dialog2.show = false;
              that.dialog.show = true;
            } else {
              that.dialog.message = "上传失败！";
              that.dialog2.show = false;
              that.dialog.show = true;
              that.progress = 0;
              that.file = null;
            }
          });
      } else {
        this.fileName = null;
      }
    },
    submit: function() {
      var that = this;
      captcha.showCaptcha({
        success(res) {
          that.ticket = res.ticket;
          that.randstr = res.randstr;
          that.post();
        },
        error() {
          that.dialog.message = "只有通过验证才能提交预约单哦！";
          that.dialog.show = true;
        }
      });
    },
    post: function() {
      var that = this;
      this.axios({
        method: "post",
        url: "http://www.hdufocus.cn:8081/reservation",
        headers: {
          ticket: this.ticket,
          randstr: this.randstr
        },
        data: {
          content: this.content,
          orgnization: this.orgnization,
          username: this.username,
          phone: this.phone,
          mail: this.mail,
          count: this.count,
          time: this.date + " " + this.time + ":00",
          remark: this.remark,
          file: this.fileName
        }
      })
        .catch(function() {
          that.dialog.message = "服务器内部错误！请稍后再试";
          that.dialog.show = true;
        })
        .then(function(response) {
          const status = response.status;
          if (status === 200) {
            that.$router.push({
              path: "/success",
              query: { data: response.data.data }
            });
          } else {
            that.dialog.message = "未知错误！请稍后再试";
            that.dialog.show = true;
          }
          5;
        });
    }
  }
};
</script>